<template>
  <div class="echartsShow">
    <div id="myChart" :style="{ width: '1000px', height: '600px' }"></div>
    <div
      id="myChart2"
      :style="{ width: '1000px', height: '600px' }"
      class="myChart2"
    ></div>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      Xdata: [
        "January",
        "February ",
        "March ",
        "April  ",
        "May ",
        "June ",
        "July",
        "August ",
        "September",
        "October",
        "November",
        "December ",
      ],
    };
  },
  //方法集合

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // console.log(this.$echarts, "实例化");
      // 绘制图表
      myChart.setOption({
        title: { text: "Monthly statistics（月份统计）" },
        tooltip: {},
        xAxis: {
          data: this.Xdata,
        },
        yAxis: {},
        series: [
          {
            name: "sales volume(销量)",
            type: "bar",
            data: [5, 20, 36, 45, 48, 50, 70, 65, 55, 25, 30, 15],
          },
        ],
      });

      // 图表二的配置
      myChart2.setOption({
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012",
            },
          },
        ],
      });
    },
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.drawLine();
  },
};
</script>
<style  lang="less" scoped>
.echartsShow {
  display: flex;
  .myChart2 {
    // border: 1px solid red;
  }
}
</style>